<template>
  <div class="echarts-outer-wrapper width-1250">
    <Title
      title="市大数据平台（领导驾驶舱）数据汇聚"
      time="4"
      timePosition="left"
      dw="单位：万条"
    ></Title>
    <div class="all-data" v-if="allData">
      <div class="inner-wrapper">
        <div class="nian">
          <div>{{ yearData[1] }}年</div>
        </div>
        <div class="tigong">
          <div>{{ allData.bnzs }} 万条</div>
        </div>
      </div>
      <div class="inner-wrapper">
        <div class="nian">
          <div>{{ yearData[0] }}年</div>
        </div>
        <div class="tigong">
          <div>{{ allData.tqzs }} 万条</div>
        </div>
      </div>
    </div>
    <div ref="echarts" style="height: 476px">
      <echartCompt class="echarts-chart" v-model="chartOption" />
    </div>
  </div>
</template>
<script>
const FullYear = new Date().getFullYear();
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";
import * as echarts from "echarts";

export default {
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: null, // 图表数据
      allData: null,
      yearData: "2022",
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.init();
    //  this.myChart = echarts.init(this.$refs.echarts);
  },
  computed: {
    chartOption() {
      let barWidth = 18;
      let colorList = ["rgba(244, 81, 85, 1)", "rgba(83, 249, 195, 1)"];
      var xdata = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      var data1 = [];
      var data2 = [];
      if (this.EchartData) {
        xdata.map((item, index) => {
          data1.push(this.EchartData.tqxqList[index].hjts);
          data2.push(this.EchartData.bnxqList[index].hjts);
        });
      }

      let option = {
        color: ["rgba(255, 255, 0, 1)", "rgba(56, 89, 255, 1)"],
        tooltip: echartOption.tooltip({
          formatter: function (params) {
            return [
              `<div style="color:${echartOption.tooltipTextColor}">${params[0].axisValueLabel}</div>`,
              `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${colorList[0]};border-radius:16px"></span>${params[0].seriesName}:${params[0].value}</div>`,
              `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${colorList[1]};border-radius:16px"></span>${params[1].seriesName}:${params[1].value}</div>`,
            ].join("");
          },
        }),
        grid: {
          top: 80,
          left: 48,
          right: 48,
          bottom: 40,
          containLabel: true,
        },
        legend: echartOption.echartLegend([
          {
            name: this.yearData[1] + "年",
            icon: "roundRect",
            color: "rgba(244, 81, 85, 1)",
          },
          {
            name: this.yearData[0] + "年",
            icon: "roundRect",
            color: "rgba(83, 249, 195, 1)",
          },
        ]),
        xAxis: {
          type: "category",
          data: xdata,
          axisTick: echartOption.xAxisTick,
          axisLine: echartOption.xAxisline,
          axisLabel: echartOption.xAxisLabel(),
          boundaryGap: true,
        },
        yAxis: {
          type: "value",
          axisTick: echartOption.yAxisTick,
          axisLine: echartOption.yAxisline,
          splitLine: echartOption.splitLine,
          axisLabel: echartOption.yAxisLabel,
          splitArea: { show: false },
        },
        series: [
          {
            type: "bar",
            name: this.yearData[1] + "年",
            data: data2,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                barBorderRadius: [barWidth / 3, barWidth / 3, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "rgba(36, 103, 183, 1)",
                  },
                  {
                    offset: 0,
                    color: "rgba(253, 80, 80, 1)",
                  },
                ]),
              },
            },
          },
          {
            type: "bar",
            name: this.yearData[0] + "年",
            data: data1,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                barBorderRadius: [barWidth / 3, barWidth / 3, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "rgba(27, 95, 171, 1)",
                  },
                  {
                    offset: 0,
                    color: "rgba(85, 253, 196, 1)",
                  },
                ]),
              },
            },
          },
        ],
      };

      return option;
    },
  },
  methods: {
    init() {
      this.getData();
      //  this.myChart.clear();
    },
    getData() {
      this.ajax({
        url: "/dpzsGzcxService/sdsjptsjhjqsQuery",
        method: "post",
        data: {
          param: {
            tqnd: FullYear - 1,
            dqnd: FullYear,
          },
        },
      }).then((res) => {
        res = res.data;
        if (res.rtnCode !== "200") {
          this.$message.error(res.rtnMsg);
          return;
        }
        this.EchartData = {
          tqxqList: res.data.tqxqList,
          bnxqList: res.data.bnxqList,
        };
        this.allData = res.data.ndzsList[0];
        this.yearData = [
          this.EchartData.tqxqList[0].ssnd,
          this.EchartData.bnxqList[0].ssnd,
        ];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.all-data {
  position: absolute;
  top: 60px;
  right: 40px;
  background-color: rgb(34, 73, 189);
  border-radius: 8px;
  padding: 6px 16px;
  color: #ffffff;
  line-height: 24px;
  font-size: 17px;
  .inner-wrapper {
    display: flex;
  }
  .nian {
    margin-left: 6px;
    color: #fbe671;
  }
  .tigong {
    margin: 0 6px;
  }
}
.echarts-outer-wrapper {
  width: 926px;
  height: 530px;
}
.echarts-chart {
  height: 100%;
  width: 100%;
}
</style>
